<template>
  <div>
    <h3>协议列表</h3>
    <ul class="agreement-title">
      <li
        v-for="(item, index) in newList"
        :key="index"
        @click="showPop(item.agreement_value,item.agreement_name)"
      >{{item.agreement_name}}</li>
    </ul>
    <van-popup v-model="showCont" position="right" :style="{ height: '100%' }">
      <header class="header clearfix">
        <section class="header-left fl">
          <a href="javascript:;" class="mheader-link" @click="hidePop">
            <span class="icon-back"></span>
          </a>
        </section>
        <section class="header-center fl">{{topBackParams.headerTitle}}</section>
        <section class="header-right fl"></section>
      </header>
      <p style="line-height: 35px;font-size: 14px;font-weight: 700;text-align: center;">协议内容</p>
      <div v-html="cont" class="content"></div>
    </van-popup>
  </div>
</template>

<script>
import { getMQCloud } from '@/api/dz/dzApi'
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      list: [],
      cont: '',
      showCont: false,
      topBackParams: {
        headerTitle: ''
      }
    }
  },
  created() {
    // 功能下放 开启了云账户的就获取数据
    this._getMQCloud()
  },
  methods: {
    showPop(val, title) {
      this.cont = val
      this.topBackParams.headerTitle = title
      this.showCont = true
    },
    _getMQCloud() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getMQCloud().then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.list = res.data.cloud_agreement
        } else {
          // this.$Error(res.msg)
        }
      })
    },
    hidePop() {
      this.showCont = false
    }
  },
  computed: {
    newList() {
      const newList = []
      this.list.map(item => {
        if (item.is_show != 0) newList.push(item)
      })
      return newList
    }
  }
})
</script>

<style lang="scss">
@import 'src/styles/mixin';
h3 {
  padding-left: 30px;
  line-height: 60px;
}
.agreement-title {
  background-color: #fff;
  border-top: 2px solid #e7e7e7;
  border-bottom: 2px solid #e7e7e7;
  li {
    line-height: 100px;
    border-bottom: 2px solid #e7e7e7;
    position: relative;
    font-size: 32px;
    padding-left: 30px;
  }
}
.header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background: #f8f8f8;
  z-index: 3;
  .header-left {
    width: 15%;
    text-align: center;
    .icon-back {
      border: solid #666;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 8px;
      transform: rotate(135deg);
      -webkit-transform: rotate(135deg);
    }
  }
  .header-center {
    width: 70%;
    font-size: 32px;
    color: #333;
    @include showEllipsis;
  }
}
.content {
  padding: 0 20px 20px;
}
</style>